<template>
  <div class="el-content-table">
    <el-table
      class="tableBox"
      :data="dataSource"
      stripe
      style="width: 100%"
      v-bind="options"
      :header-cell-style="{ 'text-align': 'center' }"
      highlight-current-row
      row-key="id"
      @selection-change="handleSelectionChange"
      ref="tableRef"
      border
      :row-class-name="tableRowClassName"
    >
      <!-- 默认插槽 -->
      <slot></slot>
      <el-table-column
        type="selection"
        width="80"
        v-if="options.mutiSelect"
        align="center"
        :reserve-selection="true"
      />
      <el-table-column
        type="index"
        width="80"
        v-if="options.Index"
        align="center"
        label="Index"
      >
        <template v-slot="scope">
          <span v-if="pagination">{{
            (pagination.pageIndex - 1) * pagination.pageSize + scope.$index + 1
          }}</span>
          <span v-else>{{ scope.$index + 1 }}</span>
        </template>
      </el-table-column>

      <template v-for="(column, index) in columns" :key="index">
        <el-table-column
          v-bind="column"
          :align="column.align ?? 'center'"
          v-if="column.type == 'expand'"
          v-slot="scope"
          :key="column"
        >
          <component :is="column.render" :row="scope.row" v-if="column.render">
          </component>
          <slot :name="column.type" :row="scope.row" v-else> </slot>
        </el-table-column>
        <el-table-column
          v-bind="column"
          :align="column.align ?? 'center'"
          v-if="column.type == column.prop"
          v-slot="scope"
        >
          <slot :name="column.type" :row="scope.row"> </slot>
        </el-table-column>
        <!-- 单表头 -->
        <el-table-column
          :prop="column.prop"
          :label="column.label"
          :width="column.width"
          :fixed="column.fixed"
          show-overflow-tooltip
          v-if="!column.type && column.prop && !column.children"
          :align="column.align ?? 'center'"
        >
        </el-table-column>
        <!-- 多表头 -->
        <el-table-column
          :prop="column.prop"
          :label="column.label"
          :width="column.width"
          :fixed="column.fixed"
          show-overflow-tooltip
          v-if="column.children"
          :align="column.align ?? 'center'"
        >
          <template v-for="subColumn in column.children" :key="subColumn">
            <el-table-column
              v-bind="subColumn"
              :align="subColumn.align ?? 'center'"
              v-if="subColumn.type == subColumn.prop"
              v-slot="scope"
            >
              <slot :name="subColumn.type" :row="scope.row"> </slot>
            </el-table-column>
            <el-table-column
              :prop="subColumn.prop"
              :label="subColumn.label"
              :width="subColumn.width"
              show-overflow-tooltip
              :align="subColumn.align ?? 'center'"
            />
          </template>
        </el-table-column>
      </template>
      <!--  <template #append>
      <slot name="append"> </slot>
    </template> -->
      <template #empty>
        <div class="table-empty">
          <slot name="empty">
            <img src="@/assets/images/notData.png" alt="notData" />
            <div>暂无数据</div>
          </slot>
        </div>
      </template>
    </el-table>
    <el-pagination
      v-model:current-page="pagination.pageIndex"
      v-model:page-size="pagination.pageSize"
      :page-sizes="[15, 30, 50, 100]"
      :small="small"
      class="demo-pagination-block"
      :background="background"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pagination.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import { ElTable } from "element-plus";
const small = ref(false);
const background = ref(true);
const props = defineProps({
  dataSource: {
    type: Array,
    default: () => [],
  },
  columns: {
    type: Array,
    default: () => [],
  },
  options: {
    type: Object,
    default: () => {},
  },
  handleSelectionChange: {
    type: Function,
    default: (val) => {},
  },
  tableRowClassName: {
    type: Function,
    default: (val) => {},
  },
  pageSizes: {
    type: Array,
    default: () => [15, 30, 50, 100],
  },
  // 分页，不传则不显示
  pagination: {
    type: Object,
    default: () => {},
  },
  // 获取数据的函数
  query: {
    type: Function,
    default: () => {},
  },
});

// 表格 DOM 元素
const tableRef = ref<InstanceType<typeof ElTable>>();

//切换每页显示数量
const handleSizeChange = (size: number) => {
  props.pagination.pageSize = size;
  props.pagination.pageIndex = 1;
  props.query();
};
//切换页码
const handleCurrentChange = (current: number) => {
  props.pagination.pageIndex = current;
  props.query();
};

/* const tableRowClassName = (rowIndex: number) => {
  if (rowIndex === 0) {
    return "warning-row";
  } else if (rowIndex === 2) {
    return "success-row";
  }
  return "";
}; */
</script>
<style scoped lang="scss">
@import "./index.scss";
</style>
